<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">证书登记</span>
      </div>
      <el-form
        ref="form"
        :model="form.data"
        :rules="form.rule"
        size="medium"
        label-width="7rem"
      >
        <el-row>
          <el-col
            :span="24"
          >
            <el-form-item
              label="证书编号"
              prop="ser_num"
            >
              <el-input
                v-model="form.data.ser_num"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
          >
            <el-form-item
              label="证书类型"
              prop="lic_type"
            >
              <el-select
                v-model="form.data.lic_type"
                placeholder="请选择证书类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in this.$store.state.lic_type"
                  :key="index"
                  :label="item"
                  :value="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
          >
            <el-form-item
              label="证书图片"
              prop="photo"
            >
              <el-upload
                ref="photo"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleChange"
              >
                <i class="el-icon-plus" />
                <div
                  slot="tip"
                  class="el-upload__tip"
                >
                  只能上传不超过 2MB 的image/*文件
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        class="ml-28"
        @click="submit"
      >
        添加
      </el-button>
    </el-card>

    <el-card class="text-center">
      <el-table
        :data="table.data"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="serNum"
          label="证书编号"
        />
        <el-table-column
          prop="licType"
          label="证书类型"
        />
        <el-table-column
          prop="licState"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.licState===0"
              size="medium"
            >
              未审核
            </el-tag>
            <el-tag
              v-else-if="scope.row.licState===1"
              size="medium"
              type="success"
            >
              已通过
            </el-tag>
            <el-tag
              v-else-if="scope.row.licState===2"
              type="danger"
              size="medium"
            >
              未通过
            </el-tag>
            <el-tag
              v-else
              size="medium"
              type="info"
            >
              {{ scope.row.state }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              plain
              icon="el-icon-delete"
              @click="del(scope.row.lid)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :hide-on-single-page="true"
        class="mt-2"
      /> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        data: {
          ser_num: undefined,
          lic_type: undefined,
          photo: undefined
        },
        rule: {
          ser_num: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          lic_type: [
            {
              required: true,
              message: '请选择',
              trigger: 'blur'
            }
          ],
          photo: [
            {
              required: true,
              message: '请上传',
              trigger: 'blur'
            }
          ]
        }
      },
      table: {
        data: [{ serNum: '加载中' }]
      }
    }
  },
  created () {
    this.axios.get('/api/ent/lic/list', {
      headers: {
        token: this.$store.state.ent.token
      }
    }).then(function (r) {
      this.table.data = r.data.detail
    }.bind(this))
  },
  methods: {
    handleChange () {
      this.form.data.photo = 1
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/lic/add', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            serNum: this.form.data.ser_num,
            licType: this.form.data.lic_type
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
        }.bind(this))
      })
    },
    del (lid) {
      this.$confirm('此操作将永久删除该备案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('/api/ent/licdelete', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            lid
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
        }.bind(this))
      })
    }
  }
}
</script>
